<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <head th:include="header :: header"></head>
    <title></title>
    <style>
        .col-sm-4,.col-sm-3{
            padding-left: unset;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">

            <a shiro:hasPermission="sys:user:save" class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>

            <a shiro.hasPermission="sys:user:update" class="btn btn-primary" @click="update"><i
                    class="fa fa-pencil-square-o"></i>&nbsp;修改</a>

            <a shiro.hasPermission="sys:user:delete" class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal" style="width: 100%">
            <div class="form-group">
                <div class="col-sm-1 control-label">数据源名称</div>
                <div class="col-sm-4">
                    <input maxlength="50" type="text" class="form-control" v-model="database.name" placeholder="数据源名称"/>
                </div>

                <!--<div v-show="showIsPub">-->
                    <!--<div class="col-sm-1 control-label" style="color: red">公共库</div>-->
                    <!--<div class="col-sm-4 checkbox-inline">-->
                        <!--<input value="false" type="checkbox" v-model="database.isPub" style="margin-left:unset;position:unset"/>-->
                        <!--<label style="color: red;">公共库不能用作数据开发，只能离线同步，且作为数据来源</label>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
            <div class="form-group">
                <div class="col-sm-1 control-label">资源分组</div>
                <div class="col-sm-4">
                    <select class="form-control" v-model="database.spaceId" disabled>
                        <option v-for="option in spaceList" v-bind:value="option.id">{{option.name}}</option>
                    </select>
                </div>

                <div class="col-sm-1 control-label">数据源类型</div>
                <div class="col-sm-4">
                    <select id="datasource_type" class="form-control" dict:select="" dictType="datasource_type" v-model="database.type" @change="changeDbType" default="--选择数据源类型--">

                    </select>
                </div>
            </div>
            <!--非关系型数据库-->
            <div v-show="showNoSql">
                <div v-show="showMongoDb">
                    <div class="form-group">
                        <div class="col-sm-1 control-label">用户名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.username"
                                   placeholder="用户名"/>
                        </div>

                        <div class="col-sm-1 control-label">密码</div>
                        <div class="col-sm-4">
                            <input maxlength="50" type="password" class="form-control" v-model="database.password"
                                   placeholder="密码"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-1 control-label">连接地址</div>
                        <div class="col-sm-4">
                            <input maxlength="500" type="text" class="form-control" v-model="database.url"
                                   placeholder="连接地址"/>
                        </div>

                        <div class="col-sm-1 control-label">数据库名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.dbName"
                                   placeholder="数据库名"/>
                        </div>
                    </div>
                </div>

                <div v-show="showHbaseDb">
                    <div class="form-group">
                        <div class="col-sm-1 control-label">连接地址</div>
                        <div class="col-sm-4">
                            <input maxlength="500" type="text" class="form-control" v-model="database.url"
                                   placeholder="HBase的ZK连接地址：node:2181,node:2181"/>
                        </div>
                    </div>
                </div>
            </div>

            <!--关系型数据库-->
            <div v-show="showJDBC">
                <div class="form-group">
                    <div class="col-sm-1 control-label">用户名</div>
                    <div class="col-sm-4">
                        <input maxlength="30" type="text" class="form-control" v-model="database.username"
                               placeholder="用户名"/>
                    </div>

                    <div class="col-sm-1 control-label">密码</div>
                    <div class="col-sm-4">
                        <input maxlength="50" type="password" class="form-control" v-model="database.password"
                               placeholder="密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-1 control-label">Host</div>
                    <div class="col-sm-4">
                        <input maxlength="300" type="text" class="form-control" v-model="database.host"
                               placeholder="域名/IP"/>
                    </div>

                    <div class="col-sm-1 control-label">Port</div>
                    <div class="col-sm-4">
                        <input maxlength="50" type="text" class="form-control" v-model="database.port"
                               placeholder="端口"/>
                    </div>
                </div>

                <div v-show="showMysqlJDBC">
                    <div class="form-group">
                        <div class="col-sm-1 control-label">数据库名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.dbName"
                                   placeholder="数据库名"/>
                        </div>

                        <div v-show="!showHiveJDBC">
                            <div class="col-sm-1 control-label">Table Schema</div>
                            <div class="col-sm-4">
                                <input maxlength="30" type="text" class="form-control" v-model="database.tableSchema" placeholder="过滤表，已支持PostgreSQL"/>
                            </div>
                        </div>

                        <div v-show="showHiveJDBC">
                            <div class="col-sm-1 control-label">Hdfs地址</div>
                            <div class="col-sm-4">
                                <input maxlength="30" type="text" class="form-control" v-model="database.hdfsUrl"
                                       placeholder="HadoopHdfs文件系统NameNode地址，格式hdfs://xxx:port"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-show="showOceaBaseJDBC">
                    <div class="form-group">
                        <div class="col-sm-1 control-label">数据库名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.dbName"
                                   placeholder="数据库名"/>
                        </div>

                        <div class="col-sm-1 control-label">集群名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.clusterName"
                                   placeholder="集群名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-1 control-label">租户名</div>
                        <div class="col-sm-4">
                            <input maxlength="30" type="text" class="form-control" v-model="database.tenantName"
                                   placeholder="租户名"/>
                        </div>

                        <div class="col-sm-1 control-label">说明</div>
                        <div class="col-sm-4">
                            <label>集群名和租户名不填，则按照Mysql的方式创建OceaBase连接，OceaBase兼容Mysql协议！</label>
                        </div>
                    </div>
                </div>

                <div v-show="showOracleJDBC">
                    <div class="form-group">
                        <div class="col-sm-1 control-label"></div>
                        <div class="col-sm-4">
                            <label class="radio-inline">
                                <input type="radio" name="oracleType" value="200" v-model="database.oracleType"/> 服务名
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="oracleType" value="201" v-model="database.oracleType"/> SID
                            </label>
                            <label class="radio-inline">
                                <input maxlength="50" type="text" class="form-control" v-model="database.dbName"
                                       placeholder="服务名/SID"/>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-1 control-label">描述</div>
                <div class="col-sm-10">
                    <input maxlength="500" type="text" class="form-control" v-model="database.remarks" placeholder="描述"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-1 control-label">创建时间</div>
                <div class="col-sm-3">
                    <input maxlength="" type="text" readonly="readonly" class="form-control"
                           v-model="database.createTime" placeholder="创建时间"/>
                </div>

                <div class="col-sm-1 control-label">修改时间</div>
                <div class="col-sm-3">
                    <input maxlength="" type="text" readonly="readonly" class="form-control"
                           v-model="database.updateTime" placeholder="修改时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-1 control-label">创建人</div>
                <div class="col-sm-3">
                    <input maxlength="" type="text" readonly="readonly" class="form-control"
                           v-model="database.createUser" placeholder="创建人"/>
                </div>

                <div class="col-sm-1 control-label">修改人</div>
                <div class="col-sm-3">
                    <input maxlength="" type="text" readonly="readonly" class="form-control"
                           v-model="database.updateUser" placeholder="修改人"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" id="btnSaveOrUpdate" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;
                <input type="button" class="btn btn-primary" id="btnTestConn"
                       @click="testConn" value="测试连接"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>

<script th:src="@{/statics/js/modules/datasource/database.js}"></script>
</body>
</html>